Tab Bars
hr.icon
画面の下に表示されるタブバーは、アプリが提供する情報や機能の種類を理解するのに役立ちます。
タブを使用すると、各セクションの現在のナビゲーション状態を維持したまま、アプリのトップレベルのセクション間をすばやく切り替えることができます。
デフォルトでは、タブバーは半透明です。
タブバーの背後にコンテンツが表示されているときのみ背景素材が使用され、一番下までスクロールすると削除されます。
キーボードが画面上にあるときは、タブバーが非表示になります。
https://gyazo.com/4a16c28a9973e141f7b0d56e43e2eaef
https://gyazo.com/1a5be291333bf3c8d9db79d905ff3354
端末のサイズや向きによっては、表示できるタブの数が最大数より少なくなることがあります。
水平方向のスペースによって見えるタブの数が制限されている場合、末尾のタブがMoreタブになり、リストの残りの項目が別画面で表示されます。
Tips
タブバーとツールバーは、どちらも画面の下に表示されますが、それぞれ用途が異なります。
例えば、時計アプリの「アラーム」「ストップウォッチ」「タイマー」タブのように、タブバーはアプリ内の異なるエリア間を移動するためのものです。
ツールバーには、アイテムの作成、アイテムのフィルタリング、コンテンツのマークアップなど、画面に関連するアクションを実行するためのボタンが含まれています。
タブバーとツールバーは、同じビューに一緒に表示されることはありません。
タブバーはナビゲーションのためにのみ使用し、アクションの実行を支援するために使用するのではありません。
現在のビューの要素に作用するコントロールを提供する必要がある場合は、代わりにToolbarsを使用してください。 情報階層を明確にし、アプリのナビゲーションを支援するために必要最小限のタブを使用します。
タブの数が多すぎると、各タブのタップ可能領域が減少し、インターフェイスが複雑になる可能性があります。
タブの数が少なすぎると、カテゴリやモードが広すぎて使いにくくなり、タブを選択して何が含まれているかを確認する必要があります。
Moreタブに追加のタブが表示される一方で、タブを表示するために余分なタップが必要で、スペースの無駄遣いになる場合があります。
一般的に、iPhoneでは3〜5個のタブを使用し、iPadでは必要に応じてさらに多くのタブを使用します。
iPadOSアプリでは、タブバーの代わりにサイドバーを使用することを検討してください。
サイドバーには多くの項目を表示できるため、iPadアプリの操作をより効率的に行うことができます。
また、サイドバーの項目をカスタマイズしたり、非表示にしてコンテンツに余裕を持たせたりすることもできます。
アプリ内の別の場所に移動するときに、タブバーを隠さないようにします。
タブバーは、アプリのグローバルナビゲーションコントロールなので、常に表示されるようにします。
ただし、モーダルビュー内のタブバーは例外です。
モーダルビューでは、ユーザーに異なるエクスペリエンスを提供し、完了すれば終了となるため、タブバーを隠してもアプリのナビゲーションには影響しません。
コンテンツが利用できないときに、タブを削除したり無効にしたりすることは避けてください。
タブが有効な場合と無効な場合があると、アプリのインターフェイスが不安定になり、予測不可能な状態になる可能性があります。
必要な場合は、タブのコンテンツが利用できない理由を説明します。
たとえば、iOSデバイスに音楽がない場合でも、「ミュージック」アプリの「今すぐ聴く」タブは利用可能であり、音楽のダウンロードを提案します。
タブは画面上の他のビューではなく、タブバーに接続されているビューに影響することを確認します。
たとえば、左側のスプリットビューのタブを選択しても、右側のスプリットビューが変更されることはありません。
同様に、ポップオーバーのタブを選択しても、ポップオーバーの背後にあるビューが変更されることはありません。
バッジを使用して、控えめなコミュニケーションを図りましょう。
タブの上にバッジ（白いテキストと数字または感嘆符を含む赤い楕円）を表示することで、そのビューまたはモードに関連する新しい情報を確認可能であると示すことができます。
スケーラブルで、視覚的に一貫したタブバーを提供するために、SFシンボルの使用を検討してください。
SFシンボルを使用すると、タブバーは異なるコンテキストに自動的に適応します。
例えば、タブバーは現在のデバイスや向きに応じて、通常のタブバーとコンパクトなタブバーを使い分けることができます。
また、タブバーのグリフは縦方向ではタブのタイトルの上に表示されますが、横方向ではグリフとタイトルを並べて表示することができます。
プラットフォームとの一貫性を保つために、塗りつぶされた記号またはグリフを優先して使用してください。
iPadで動作するアプリでタブバーの代わりにサイドバーを使用する場合、塗りつぶされたシンボルまたはグリフをアウトライン化されたサイドバーに切り替えます。
https://gyazo.com/ecbd7c1e35b05a8686862c94fdc3e5e0
カスタムのタブバーグリフを作成する必要がある場合は、通常の環境とコンパクトな環境の両方でタブバーが綺麗に見えるよう、各グリフを2つのサイズで作成します。
異なる形状のタブバーグリフを作成する場合は、次のメトリックを使用します。
Target width and height (circular glyphs)
https://gyazo.com/cb4a1b6837a6f12fec6f20ccb982fcd3
table: Target width and height (circular glyphs)
Regular tab bars Compact tab bars
25x25 pt (75x75 px @3x) 18x18 pt (54x54 px @3x)
25x25 pt (50x50px @2x) 18x18 pt (36x36 px @2x)
Target width and height (square glyphs)
https://gyazo.com/50ac85032b8aad2317594b1f270daf30
table: Target width and height (square glyphs)
Regular tab bars Compact tab bars
23x23 pt (69x69 px @3x) 17x17 pt (51x51 px @3x)
23x23 pt (46x46 px @2x) 17x17 pt (34x34 px @2x)
Target width (wide glyphs)
https://gyazo.com/2031160f6cc402e9ddd4b1a76c08d059
table: Target width (wide glyphs)
Regular tab bars Compact tab bars
31pt (93px @3x) 23pt (69px @3x)
31pt (62px @2x) 23pt (46px @2x)
Target height (tall glyphs)
https://gyazo.com/d7a1c7cab8a6f41ced7f7e9527ea0dbf
table: Target height (tall glyphs)
Regular tab bars Compact tab bars
28pt (84px @3x) 20pt (60px @3x)
28pt (56px @2x) 20pt (40px @2x)